<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
		<title>物料信息列表</title>
		<link rel="stylesheet" type="text/css" href="<%=basePath %>css/style.css"/>
		<link rel="stylesheet" type="text/css" href="<%=basePath %>css/list.css"/>
		
		<style>
			.label_input .contentText{display:inline-block;width:100px;text-align:right;} input{width:160px;}
			
		</style>
	</head>
	<body>
		<!-- 蓝色背景区域 -->
		<div class="wrap">
			<!-- 白色可用区域 -->
			<div class="canuse">
				<!------ 位置 ------>
	            <p class="contentText local"><span>位置：物料信息管理列表</span></p>
	            
            	<!-- 搜索区 -->
	            <div class="search_area">
                    <h4 class="sel_title"><img src="<%=basePath %>img/list/brand1.png" /><span>物料信息查询条件</span></h4>
                    <div class="select_area">
                        <div class="select_text clear">
                        	<div class="label_input">
	                            <label class="contentText">所属型号阶段：</label> 
	                            <input type="text" name="stage" id="stage">
                        	</div>
                        	<div class="label_input">
	                            <label class="contentText">图号：</label> 
	                            <input type="text" name="graphNumber" id="graphNumber">
                        	</div>
							<div class="label_input">
	                            <label class="contentText">单机名称：</label> 
	                            <input type="text" name="materialName" id="materialName">
                        	</div>
                        	<div class="label_input">
	                            <label class="contentText">单机代号：</label> 
								<input type="text" name="materialCode" id="materialCode">
                        	</div>
							<div class="label_input">
	                            <label class="contentText">批次号：</label> 
	                            <input type="text" name="batchNo" id="batchNo">
                        	</div>
                        	<div class="label_input">
	                            <label class="contentText">RFID卡号：</label> 
	                            <input type="text" name="rfidCardNumber" id="rfidCardNumber">
                        	</div>
                            <div class="floatLeft">
	                            <button class="btn_search bgd_blue_search">查询</button>
	                            <button class="btn_clear bgd_white_clear">重置</button>
                            </div>
                        </div>
                    </div>
	            </div>
	            
	            <!-- 列表区 -->
	            <div class="show_list">
                	<div class="title_operate">
                    	<h4 class="sel_title"><img src="<%=basePath %>img/list/brand1.png" /><span>物料信息列表</span></h4>
                		
                        <!-- 操作类型区 -->
                        <div class="operate_area">
                            <a href="<%=basePath %>/materialBaseInfo/toMaterialAddJsp" class="bgd_add img_hand">增加</a> 
                            <a onclick="MaterialList.deleteMaterials()" class="bgd_delete img_hand">删除</a>
                            <a href="<%=basePath %>Excel/materialExcelTemplate.xls" class="bgd_export img_hand" style="display:inline-block;position:relative;">模板</a> 
							<a onclick="addFile();" class="bgd_import img_hand">导入</a>
                        </div>
                	</div>
                	<div class="list_area">
                        <!-- 信息列表区 -->
                        <div class="info_area">
                            <table class="tablelist" border="1" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr class="menuText list_head">
                                        <th class="checkSelectAll"></th>
                                        <th class="">所属型号阶段</th>
                                        <th class="">图号</th>
                                        <th class="">单机名称</th>
                                        <th class="">单机代号</th>
                                        <th class="">批次号</th>
                                        <th class="">数量</th>
                                        <th class="">RFID卡号</th>
                                        <th class="">备注</th>
                                    </tr>
                                </tbody>
                                <tbody class="tablelist" id="materialTab">
                                </tbody>

                            </table>
                        </div>
	                    <!-- 页码区 -->
	                    <div class="page_area contentText clear" id="materialPage">
	                    </div> 
                    </div>
                </div>
			</div>
			
			<!-- 版尾  -->
			<div class="ending">
				Copyright© 2019-2020 磐基技术有限公司
			</div>
			
			<!-- 等待加载 -->
			<!--<div class="loader"><p class="load_hint">请等待加载••••••</p></div>-->
			
			<!-- 导入Excel文件 -->
			<div class="mask hidden">
				<div class="fileDiv">
					<h4 class="fileTitle">
						导入文件 <img onclick="backFile();" src="img/list/delete.png" />
					</h4>
					<form action="materialBaseInfo/uploadExcel" method="post"
						enctype="multipart/form-data" class="fileForm">
						<label>请选择Excel文件：</label> 
						<input type="file" name="file" id="fileInput" value=""/>
						<br />
						<br />
						<br /> 
						<input type="submit" name="submit" id="subBtn"	class="bgd_blue_two img_hand" value="提交" /> 
						<a onclick="backFile();" class="bgd_white_two img_hand">返回</a>
					</form>
				</div>
			</div>
			
		</div>
	</body>
	<script id="materialTemp" type="text/html">
	{{each materialList obj index}}
    	<tr class='listTableText list_list'>
    	<td><input type='checkbox' class='input_checkBox' id={{obj.materialCode}}></td>
    	<td><a class='cursor' onclick='MaterialList.toInfo("{{obj.materialCode}}")'>{{obj.stage}}</a></td>
    	<td>{{obj.graphNumber||"--"}}</td>
    	<td>{{obj.materialName||"--"}}</td>
    	<td>{{obj.materialCode||"--"}}</td>
    	<td>{{obj.batchNo||"--"}}</td>
    	<td>{{obj.nums||"--"}}</td>
    	<td>{{obj.rfidCardNumber||"--"}}</td>
    	<td>{{obj.remark||"--"}}</td>
    	</tr>
	{{/each}}
	</script>
	<script src="<%=basePath %>js/3rd/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=basePath%>js/3rd/es5-shim.min.js" type="text/javascript" ></script>
	<script src="<%=basePath%>js/3rd/es5-sham.min.js" type="text/javascript"></script>
	<script src="<%=basePath%>js/3rd/json3.min.js" type="text/javascript"></script>
	<script src="<%=basePath%>js/3rd/template-web.js" type="text/javascript"></script>
	<script src="<%=basePath%>js/common/common.js" type="text/javascript"></script>
	<script src="<%=basePath%>js/frame/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=basePath%>/js/basicInfoManagement/materialList.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		path = "<%=basePath%>";
		var h = document.documentElement.clientHeight;
		$(".wrap").css("height", h);
		
		// 获取每行 td 的兄弟节点
		$("td").hover(   
			function () {      
				$(this).parent().children().addClass("td_hover");   
			},    
			function () {      
				$(this).parent().children().removeClass("td_hover");   
			}
		);
		
		// 导入Excels
		function addFile(){
			$(".mask").css("display", "block");
		}
		
		// 返回列表
		function backFile(){
			$(".mask").css("display", "none");
			window.location.href = "<%=basePath%>materialBaseInfo/toMaterialBaseInfoJsp";
		}
		
		function UpladFile(fileObj) {
			var form = new FormData(); // FormData 对象
			form.append("file", fileObj); // 文件对象
			$.ajax({
				url: 'xxx',                      //url地址
				type: 'POST',                 //上传方式
				data: form,                   // 上传formdata封装的数据
				dataType: 'JSON',
				cache: false,                  // 不缓存
				processData: false,        // jQuery不要去处理发送的数据
				contentType: false,         // jQuery不要去设置Content-Type请求头
				success:function (data) {           //成功回调
					console.log(data);
				},
			   error:function (data) {           //失败回调
					console.log(data);
				}
			}); 
		 }

		function upload(){
			$("#file").click();
			$('#file').change(function (e) {
				 var fileName = e.target.files[0];//js 获取文件对象
				 if(fileName !== undefined){
				   var file_typename =   fileName.name.substring(fileName.name.lastIndexOf('.'));
				   if (file_typename === '.xlsx' || file_typename === '.xls') {
					$("#filename").css("display","block");
					$("#filename").val(fileName.name);
				   UpladFile(fileName);
				   }else {
					console.log("请选择正确的文件类型！")
					} 
				 }else{
					console.log("请选择正确的文件！")
				}
			});
		}
	</script>
</html>
